<template>
	<el-form ref="ruleFormRef" :model="formInline" :rules="formRules" label-width="auto" label-position="top"
		v-loading="isLoading">
		<el-row :gutter="30">
			<re-col :value='24' :xs='24' :sm='24'>
				<el-form-item :label='titles?.unityId' prop=''>
					<!-- {{ isNullOrEmpty( formInline.unityName ) }} -->
					<div v-if="formInline?.unityId">
						{{ isNullOrEmpty(formInline?.unityName) }}
					</div>
					<div v-else>
						{{ isNullOrEmpty(usePageVariablesStoreHook().getManage().unityName) }}
					</div>
				</el-form-item>
				<!-- <el-form-item :label='titles?.roleName' prop=''>
					<el-input v-model.trim='formInline.roleName' clearable :placeholder='prompt?.roleName' />
				</el-form-item> -->
				<el-form-item :label='titles?.roleName' prop='roleName'>
					<el-input :maxlength="30" :show-word-limit="true" v-model.trim='formInline.roleName' clearable
						:placeholder='prompt?.roleName' />
				</el-form-item>
			</re-col>
			<re-col :value='24' :xs='24' :sm='24'>
				<el-form-item :label='titles?.permissions' prop='permissions'>
					<MyHorizontalTreeList v-model:checked="formInline.permissions" :list="permissionList"
						:key="listKey" />
					<!-- <el-input v-model.trim='formInline.permissions' clearable :placeholder='prompt?.permissions' /> -->
				</el-form-item>
			</re-col>

		</el-row>
	</el-form>


</template>

<script setup lang="ts">
import { isNullOrEmpty } from '@/utils/functions'
import { ref, reactive } from "vue";
import ReCol from "@/components/ReCol";
import type { FormRules } from "element-plus";
import { titles, prompt } from './index';
import MyHorizontalTreeList from '@/components/MyHorizontalTreeList/index.vue'
import type { infoType } from '@/api/manage/projectManagementes/projectrole/index';
import { usePageVariablesStoreHook, } from '@/store/modules/pageVariables'
const usePageVariablesStore = usePageVariablesStoreHook()

type FormProps = {
	formInline: infoType,
	isLoading: boolean,
	getAllPermission: Function
}
const listKey = ref(0)
const permissionList = ref([])
const props = withDefaults(defineProps<FormProps>(), {
	formInline: () => ({} as infoType),
	isLoading: false,
	getAllPermission: () => { }
});

const formRules = reactive(<FormRules>{
	// 	permissions: [{ required: true, message: prompt?.permissions, trigger: 'blur' },],
	// roleName: [{ required: true, message: prompt?.roleName, trigger: 'blur' },],
	// createdAt: [{ required: true, message: prompt?.createdAt, trigger: 'blur' },],
	// id: [{ required: true, message: prompt?.id, trigger: 'blur' },],
});
const ruleFormRef = ref();
onMounted(() => {
	console.log("测试权限");
	props.getAllPermission().then(res => {
		permissionList.value = res.result
		// console.log(logAllPermission());
	})
})
const logAllPermission = (list = permissionList.value) => {
	let str = ''
	list.forEach(item => {
		str += `${item.id} // ${item.name} \n`
		if (item.childs && item.childs.length > 0) {
			str += logAllPermission(item.childs)
		}
	})
	return str
}
function getRef() {
	return ruleFormRef.value;
}
function reList() {
	listKey.value++
}
defineExpose({ getRef, reList });
</script>
